<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>个人信息</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
		display: none;
	}
	.avatar-uploader-icon {
    font-size: 40px;
    color: #8c939d;
    width: 92px;
    height: 92px;
    line-height:92px;
    text-align: center;
  }
</style>
</head>
<body>
<div id="app" v-cloak>
	<header>
	</header>
	<div class="header-space"></div>
	<section class="section441">
		<div class="content">
			<a href="47.html" class="item on">个人信息</a>
			<a href="48.html" class="item">公司信息</a>
		</div>
	</section>
	<section class="section471">
		<div class="content">
			<div class="face">
				<!-- <img src="images/face.jpg" alt=""> -->
				<el-upload
					key="ava-key"
					:show-file-list="false"
					:before-upload="checkImg"
					:http-request="uploadImg"
					accept=".jpg,.jpeg,.png,.JPG,.JPEG"
					class="avatar-uploader"
					action=""
				>
				<div v-if="logo" class="img" style="text-align: center;">
					<img :src="logo" alt="图片出错" class="item-img" style="width:92px;height:92px;border-radius: 100px;">
				</div>
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			</div>	
			<ul class="form">
				<li>
					<span class="tt">姓名：</span>
					<input
						class="input"
						type="text"
						placeholder="请输入姓名"
						v-model="name"
					>
				</li>
				<li>
					<span class="tt">性别：</span>
					<select name="" id="" v-model="sex">
						<option disabled value="">请选择</option>
						<option value="0">女</option>
						<option value="1">男</option>
					</select>
				</li>
				<li>
					<span class="tt">职位：</span>
					<input type="text" placeholder="请输入职位" v-model="title" class="input">
				</li>
				<li>
					<span class="tt">电话：</span>
					<input type="text" placeholder="请输入电话号码" v-model="tel" class="input">
				</li>
				<li><span class="tt">常用邮箱：</span><input type="text" placeholder="请输入邮箱" class="input" v-model="email"><i class="tips">选填</i></li>
			</ul>
			<div class="operate">
				<a href="javascript:void(0)" class="btn" @click="submitHandle">保存</a>
			</div>
		</div>
	</section>
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
	})
	var rules = {
		logo: {
			test: function(src) {
				return src !== ''
			},
			msg: '头像必须上传'
		},
		name: {
			test: function(val) {
				return val !== ''
			},
			msg: '姓名必须填写'
		},
		sex: {
			test: function(val) {
				return val !== ''
			},
			msg: '性别必须选择'
		},
		title: {
			test: function(val) {
				return val !== ''
			},
			msg: '职位必须填写'
		},
		tel: {
			test: function(val) {
				return val !== ''
			},
			msg: '电话必须填写'
		}
	};
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				name: '',
				logo: '',
				sex: '',
				email: '',
				title: '',
				tel: ''
			}
		},
		mounted () {
			this.fetchPersonalInfo();
		},
		methods: {
			fetchPersonalInfo() {
				var vm = this;
				var url = 'enterprise/company/employee_base_info';
				request( url, 'GET', '',
					function (res) {
						console.log(res);
						vm.name = res.data.name;
						vm.logo = res.data.logo;
						vm.sex = res.data.sex;
						vm.email = res.data.email;
						vm.title = res.data.title;
						vm.tel = res.data.telephone;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
					}
				)
			},
			submitHandle() {
				var loading = this.$loading({
					lock: true,
					text: '保存中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
        var that = this;
				var isPass = Object.keys(rules).every(function(key) {
					var val = this[key];
					var rule = rules[key];
					var result = rule.test(val);
					if (!result) {
						loading.close();
						this.$message({
							type: 'warning',
							message: rule.msg
						})
					}
					return result
				}, this);
				if (!isPass) return;
				this.sendData(loading);
			},
			sendData(loading) {
				var vm = this;
				var param = {
					name: this.name,
					logo: this.logo,
					sex: this.sex,
					email: this.email,
					title: this.title,
					telephone: this.tel
				}
				// console.log(param);
				request( 'enterprise/company/employee_update', 'PUT', JSON.stringify(param), function (res) {
					// console.log(res);
					loading.close();
					vm.fetchPersonalInfo();
					vm.$message({
						message: res.message,
						type: 'success'
					});
				}, function (err) {
					var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
					vm.$message({
						type: 'warning',
						message: msg
					})
					loading.close();
				})
			},
			checkImg: function (file, fileList) {
				if (file.size > 10 * 1024 * 1024) {
					this.$message('上传图片大小应小于10MB');
					return false
				}
				return true
			},
			uploadImg: function (e) {
				uploadImg({
					file: e.file,
					success: successFn.bind(this),
					fail: failFn.bind(this)
				})

				function successFn(res) {
					console.log('uploadSuccess', res);
					this.logo = qiniuUrl + '/' + res.key;
				}

				function failFn(err) {

				}
			}
		}
	})
</script>
</body>
</html>